<template>
    <div style="position: fixed; top: 0; height: 50px; width: 100%; z-index: 999; "><TopBar></TopBar></div>

    <div class="tabs">
        <n-card>
            <n-h1>{{articleInfo.title}}</n-h1>
            <div style="height: 75px; background-color: #FCFAF7;">
                <n-avatar @click="toOtherUser" round size="medium" :src=userUrl style="position: relative; left: 20px; top: 20px; cursor: pointer;"/>
                <text style="position: relative; left: 36px; color: #808080;">发布时间：{{articleInfo.created_at}} </text>
                <text style="position: relative; left: 108px; color: #808080;">最近修改：{{articleInfo.updated_at}} </text>
                <text style="position: relative; left: 180px; color: #808080;">访问次数：{{articleInfo.read_cnt}} </text>
                <div style="position: relative; left: 70px; color: #808080;">
                    文章分类：
                    <n-tag type="warning">{{categoryName}}</n-tag>
                </div>
                <n-button v-if="self" @click="toUpdate" ghost style="bottom: 45px; left: 805px;" color="#7B3DE0">修改</n-button>
                <n-button v-if="self" @click="toDelete" ghost style="bottom: 45px; left: 815px;" color="#7B3DE0">删除</n-button>
            </div>
            <n-divider />
            <n-button v-if=!collected text @click="newCollect" style="position: absolute; right: 40px; top: 25px; cursor: pointer;" round ghost color="#FFA876">
                <template #icon>
                    <n-icon>
                        <star-outline />
                    </n-icon>
                </template>
                收藏
            </n-button>
            <n-button v-else text @click="unCollect" style="position: absolute; right: 40px; top: 25px; cursor: pointer;" round ghost color="#FFA876">
                <template #icon>
                    <n-icon>
                        <star />
                    </n-icon>
                </template>
                已收藏
            </n-button>
            <div class="article-content">
                <div v-html="articleInfo.content"></div>
            </div>
            <n-divider/>
            <div>
                <n-button @click="showModalModal" ghost style="top: 0px; left: 830px;" color="#7B3DE0">添加评论</n-button>
                <text style="position: absolute; left: 30px; font-size: 20px; color: #808080;">共{{commentsCount}}条评论 </text>
                <div>
                    <div v-for="(cmt, index) in commentsInfo" :key="index">
                        <n-card :bordered="false" style="margin-top: 20px; height: 200px; overflow-y: hidden">
                            <div>
                                <n-avatar round @click="toOtherUsers(index)" size="large" :src=serverUrl+cmt.avatar style="float: left; cursor: pointer;" />
                                <text style="position: absolute; left: 90px; top: 25px; font-size: 20px;">{{cmt.user_name}}</text>
                                <text style="position: absolute; margin-top: 10px; right: 10px;">{{cmt.created_at}}</text>
                                <text style="position: absolute; margin-top: 10px; right: 250px">总回复量: {{cmt.reply_cnt}}</text>
                                <!-- <n-button v-if=!like @click="Like(index)" style="position: absolute; right: 150px; top: 25px; cursor: pointer;" round ghost color="#ED4557">
                                    <template #icon>
                                        <n-icon>
                                            <heart-outline />
                                        </n-icon>
                                    </template>
                                    likes
                                </n-button>
                                <n-button v-else @click="UnLike(index)" style="position: absolute; right: 150px; top: 25px; cursor: pointer;" round ghost color="#ED4557">
                                    <template #icon>
                                        <n-icon>
                                            <heart />
                                        </n-icon>
                                    </template>
                                    likes
                                </n-button> -->
                                
                                <div v-html="cmt.content" style="position: absolute; left: 90px; top:75px;"></div>
                                <n-button strong secondary @click="toDetailedComments(index)" style="position: absolute; left: 420px; bottom: 20px;">查看完整评论</n-button>
                            </div>
                        </n-card>
                        <n-divider />
                    </div>
                </div>
            </div>
            
        </n-card>
    </div>

    <n-modal v-model:show="showModal">
        <div style="width: 800px; height: 400px; background: white;">
            <div class="content-container" style="height: 80%;">
                <div class="editor-section">
                    <n-card>
                        <rich-text-editor style="height: 220px;" v-model:modelValue="addComment.content"></rich-text-editor>
                    </n-card>
                </div>
            </div>
            <div style="position: absolute; right: 100px; bottom: 30px;">
                <n-button type="default" @click="closeSubmitModal">
                    取消
                </n-button>
            </div>
            <div style="position: absolute; right: 30px; bottom: 30px;">
                <n-button type="primary" @click="submit">
                    确认
                </n-button>
            </div>                
        </div>
    </n-modal>
</template>

<script setup>
import {ref,reactive,inject, onMounted} from 'vue'
import RichTextEditor from '../components/RichTextEditor.vue'
import TopBar from '../components/TopBar.vue'
import { Star } from "@vicons/ionicons5"
import { StarOutline } from "@vicons/ionicons5"
import {HeartOutline} from '@vicons/ionicons5'
import {Heart} from '@vicons/ionicons5'

import {useRouter, useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

const serverUrl = inject("serverUrl")
const axios = inject("axios")
const message = inject("message")
const dialog = inject("dialog")

const articleInfo = ref({})
const commentsInfo = ref([])
const categoryName = ref("")
const user = ref({})
const userUrl = ref("")
const collected = ref(false)
const index = ref(0)
const self = ref(false)
const loginId = ref(0)
const commentsCount = ref(0)
const showModal = ref(false)
const like = ref(false)
const likes = ref([])


const addComment = reactive({
    content: "",
})

onMounted(() => {
    loadArticle()
    loadComments()
    loadCurrentUser()
})

const toDetailedComments = (index) => {
    if (loginId.value == 0) {
        message.warning("请先登陆")
        toLogin()
        return
    }
    let commentid = commentsInfo.value[index].id
    router.push({
        path: "/detailedComment",
        query: {
            id: commentid
        }
    })
}

const showModalModal = () => {
    if (loginId.value != 0) {
        showModal.value = true;
    } else {
        message.warning("请先登陆")
        toLogin()
    }
}

const Like = (index) => {
    like.value = true
}

const UnLike = (index) => {
    like.value = false
}

const addReply = (index) => {
    
}

const toLogin = () => {
    router.push("/login")
}

const closeSubmitModal = () => {
    showModal.value = false;
}

const loadCurrentUser= async() => {
    let res = await axios.get("/user")    
    console.log(res)
    if (res.data.code == 200) {
        loginId.value = res.data.data.id
    }
}

const loadArticle = async() => {
    let res1 = await axios.get("article/" + route.query.id)
    console.log(res1)
    if (res1.data.code == 200) {
        articleInfo.value = res1.data.data.article 
        let res2 = await axios.get("category/" + res1.data.data.article.category_id) 
        console.log(res2)
        if (res2.data.code == 200) {
            categoryName.value = res2.data.data.categoryName
        }
        let res3 = await axios.get("user/briefInfo/" + res1.data.data.article.user_id)
        console.log(res3)
        if (res3.data.code == 200) {
            user.value = res3.data.data
            userUrl.value = serverUrl + user.value.avatar
            if (user.value.id == loginId.value) {
                self.value = true
            }
        }
        let res4 = await axios.get("collects/" + route.query.id) 
        console.log(res4)
        if (res4.data.code == 200) {
            collected.value = res4.data.data.collected
            index.value = res4.data.data.index
        }  
    }
}

const loadComments = async() => {
    let res1 = await axios.get("/comment/list/" + route.query.id)
    console.log(res1)
    if (res1.data.code == 200) {
        commentsInfo.value = res1.data.data.comments
        commentsCount.value = res1.data.data.count
    }
}

const submit = async() => {
    let res = await axios.put("/comment/add/" + route.query.id, {
        Content: addComment.content
    })
    console.log(res)
    if (res.data.code = 200) {
        message.success("添加成功")
        ReloadComments()
        showModal.value = false
    } else {
        message.success("添加失败")
    }
}

const newCollect = async() => {
    let res = await axios.put("collects/new/" + route.query.id)
    console.log(res)  
    if (res.data.code == 200) {
        message.warning("已收藏", {showIcon: false})  
        loadArticle()  
    }
}

const unCollect = async() => {
    let res = await axios.delete("collects/" + route.query.id)
    console.log(res)  
    if (res.data.code == 200) {
        message.warning("取消收藏", {showIcon: false})  
        loadArticle()  
    }
}

const toOtherUsers = (index) => {
    let id = commentsInfo.value[index].user_id
    if (id == loginId.value) {
        router.push({
            path: "/myself",
            query: {
                id: id
            }
        })   
    } else {
        router.push({
            path: "/others",
            query: {
                id: id
            }
        })
    }
}

const toOtherUser = () => {
    if (user.value.id == loginId.value) {
        router.push({
            path: "/myself",
            query: {
                id: user.value.id
            }
        })   
    } else {
        router.push({
            path: "/others",
            query: {
                id: user.value.id
            }
        })
    }
}

const toUpdate = () => {
    router.push({
        path: "/update",
        query: {
            id: articleInfo.value.id
        }
    })
}

const toDelete = async (blog) => {
    dialog.warning({
      title: '警告',
      content: '是否要删除',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
            let res = await axios.delete("article/" + articleInfo.value.id)
            if(res.data.code == 200){
                message.info(res.data.msg)
                goback()
            }else{
                message.error(res.data.msg)
            }  
        },
        onNegativeClick: () => {}
    })    
}

const goback= () => {
    router.go(-1)    
}

const ReloadComments = () => {
    loadComments()
}

</script>

<style lang="scss" scoped>
.tabs {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1000px;
    height: auto;
    background: white;  
    box-shadow: 0px 1px 3px #D3D4D8; 
    border-radius: 5px; 
}
.article-content img{
    max-width: 100% !important;
}
.content-container {
    display:flex;
    flex-direction: row;
    margin-top: 25px;
    padding: 20px;
    height: calc(100vh - 75px);
}
.editor-section {
    flex: 2;
    margin-right: 10px;
}
</style>